<template>
  <page-wrap
    :show-top="showTop"
    bg-color="transparent"
    back
    hideTab
    :dark="false"
    style="overflow-y: hidden"
    :hideSafeArea="true"
  >
    <!-- #ifdef MP-WEIXIN -->
    <template #title>
      <image class="logo" :src="logoSrc"></image>
    </template>
    <!-- #endif -->
    <view v-if="isShowPage" class="index">
      <view
        class="index-top"
        :class="{ 'index-top-no-kingkong': !$indexShowKingKong }"
        :style="'padding-top:' + navHeight + 'px;'"
      >
        <view class="index-search">
          <view class="search-wrap">
            <image :src="srhIcon"></image>
            <input
              type="text"
              placeholder="搜索或筛选职位/公司"
              confirm-type="搜索"
              placeholder-class="placeholder"
              :disabled="true"
              @click="handleToSearch"
            />
          </view>
        </view>
        <king-kong v-if="$indexShowKingKong"></king-kong>
      </view>
      <!-- <view class="index-banner">
        <swiper indicator-active-color="#222222" autoplay indicator-dots circular>
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <image :src="item.img"></image>
          </swiper-item>
        </swiper>
      </view> -->
      <view class="index-main">
        <view class="hot-post">
          <!-- <view class="hp-title" v-if="!norMode">
            <text class="title-cont">热门职位</text>
            <text
              class="title-back"
              @click="
                norMode = true;
                handleJobList();
              "
              v-if="isModeChange"
              >返回筛选</text
            >
          </view> -->
          <view class="hp-filter-wrap">
            <view
              :class="['hp-filter', { fixed: filterFixed }]"
              :style="'top:' + navHeight + 'px;'"
            >
              <view class="filter-post">
                <view class="post-list">
                  <text
                    :class="['post-item', { active: activeAim === index }]"
                    v-for="(item, index) in aimList"
                    :key="index"
                    @click="handleAimClick(index)"
                    >{{ item.zwname || item.label }}</text
                  >
                </view>
                <view class="add" @click="handleToAim">
                  <text class="icon add-icon"></text>
                  <view class="add-text"><text>职位意向</text></view>
                </view>
              </view>
              <view class="filter-more">
                <view class="filter-more-left">
                  <view
                    class="btn-region"
                    :class="{ active: !nowRegionId }"
                    @click="handleChangeRegion('all')"
                    >全部</view
                  >
                  <view
                    class="btn-region"
                    :class="{ active: nowRegionId }"
                    @click="handleChangeRegion"
                    >附近</view
                  >
                </view>
                <view class="filter-more-right">
                  <view v-if="nowRegionId" class="region-name"
                    ><u-icon
                      name="map"
                      :color="$primaryColor"
                      size="28"
                    ></u-icon>
                    {{ nowRegionName }}</view
                  >
                  <view class="filter-more-filter" @click="handleFilter"
                    ><text class="filter-text"> 筛选</text
                    ><u-icon name="arrow-down-fill" size="18"></u-icon
                  ></view>
                </view>
              </view>
            </view>
          </view>
          <job-list
            class="hp-list"
            :data="postList"
            :props="postProp"
            :status="moreLoading"
            :positionId="positionId"
            v-if="postList.length || !isSearched"
          ></job-list>
          <u-empty
            text="暂无内容"
            :src="emptyImg"
            icon-size="378"
            color="#000000"
            font-size="32"
            v-else-if="isShowNewEmpty"
          ></u-empty>
          <view class="no-data" v-else-if="norMode">
            <u-empty text="暂无数据">
              <view class="no-data-opt" slot="bottom">
                <u-button
                  class="reset"
                  :hair-line="false"
                  :custom-style="customStyle"
                  @click="handleReset"
                  >重置筛选项</u-button
                >
                <!-- <u-button @click="handleModeChange">查看热门职位推荐</u-button> -->
              </view>
            </u-empty>
          </view>
        </view>
      </view>
    </view>
    <UpdatePopup></UpdatePopup>
  </page-wrap>
</template>

<script>
import JobList from "@/components/JobList";
import KingKong from "@/components/KingKong";
import RegionFilter from "@/components/RegionFilter";
import MoreFilter from "@/components/MoreFilter";
import UpdatePopup from "@/components/UpdatePopup";
import ShareMixin from "@/mixins/share";
import ReportShareMixin from "@/mixins/reportShare";

import {
  getRegionByXY,
  getMyIntendedTradeList,
  searchZp,
  getIpLocation,
} from "@/api/index";
import { getLayerDataRelList } from "@/api/modules/career";

export default {
  mixins: [ShareMixin, ReportShareMixin],
  components: {
    JobList,
    KingKong,
    RegionFilter,
    MoreFilter,
    UpdatePopup,
  },
  data() {
    return {
      recommendedPositions: { dataId: "", dataTitle: "" },
      positionId: "",
      activeColor: this.$primaryColor,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      inactiveColor: "#555555",
      customStyle: {
        backgroundColor: "#E9ECEF",
        border: "none",
        color: "#555555",
      },
      regionCustomStyle: {
        backgroundColor: "tra",
        marginRight: "10rpx",
      },
      regionActiveCustomStyle: {
        backgroundColor: this.$primaryColor,
        color: "#666",
        marginRight: "10rpx",
      },
      filter: {
        region: this.$regionId,
      },
      filterList: [
        {
          name: this.$regionName || "工作地区",
          component: "RegionFilter",
          prop: "region",
          propList: ["region"],
        },
        {
          name: "筛选",
          component: "MoreFilter",
        },
      ],
      norMode:
        uni.getStorageSync("person-id") && this.$indexPostMode === "normal",
      logoSrc: this.$imgBaseSelf + "logo.png?v=" + getApp().globalData.nowDate,
      srhIcon: this.$imgBaseSelf + "home/search.png",
      bannerList: [],
      aimList: [
        {
          zwname: "",
          label: "推荐",
        },
      ],
      postList: [],
      postProp: {
        title: "jtzw",
        salary: "xzdy_new",
        cname: "cname_all",
        time: "updatetime",
        region: "regionname",
        fldy: "fldy",
        gznum: "gznum",
        edus: "edus",
        jobtypes: "jobtypes",
        yuangong: "yuangong",
      },
      pageParam: {
        page: 0,
        pageSize: 10,
      },
      moreLoading: "loadmore",
      showTop: false,
      navHeight: 0,
      nowRegionId: "",
      nowRegionName: "",
      filterFixed: false,
      mainTop: null,
      scrollTop: 0,
      activeAim: 0,
      opening: null,
      isSearched: false,
      isModeChange: false,
      emptyImg: this.$imgBase + "empty.png",
      isShowPage: false,
    };
  },
  computed: {
    isShowNewEmpty() {
      if (
        this.nowRegionId ||
        this.filter.salary ||
        this.filter.exp ||
        this.filter.time ||
        this.filter.edu ||
        this.filter.type
      )
        return false;
      return true;
    },
  },
  onShow() {
    // 获取用户授权状态值
    const authStatus = uni.getStorageSync("privacyAuthStatus");
    // 判断是否已经授权
    if (!authStatus) {
    } else {
      //隐私授权同意后请求数据
      this.handleAimList();
    }
  },
  created() {
    // #ifdef MP-WEIXIN
    this.navHeight = getApp().globalData.navHeight;
    // #endif
    if (this.personId) {
      this.$bus.$emit("getUserInfo");
    }
  },
  mounted() {
    if (getApp().globalData.loginStatus === "company") {
      return;
    }
    if (this.norMode) {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".hp-filter-wrap")
        .boundingClientRect((data) => {
          this.mainTop = data.top;
        })
        .exec();
    }
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#ffffff",
    });
    let tabBarList =
      getApp().globalData.loginStatus === "company"
        ? getApp().globalData.companyTabs
        : getApp().globalData.personTabs;
    getApp().globalData.tabBarList = tabBarList;
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.positionId = opt.positionId;
    this.getPositionInfo(this.positionId);
    if (getApp().globalData.loginStatus === "company") {
      uni.reLaunch({ url: "/pages/library/index" });
      this.isShowPage = false;
      return;
    } else {
      this.isShowPage = true;
    }
    let that = this;
    uni.$on("filterUpdate", function (data) {
      that.filter = data;
      that.pageParam.page = 0;
      that.handleJobList();
    });
    this.handleJobList();
    uni.$on("aimUpdate", () => {
      this.handleAimList();
    });
    this.shareContent.contentType = "51";
    this.shareQuery += "&positionId=" + this.positionId;
    this.sharePath = `/pagesSub/career/morePositions/index?${this.shareQuery}`;
  },
  onUnload() {
    uni.$off("filterUpdate");
    uni.$off("aimUpdate");
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
    this.scrollTop = res.scrollTop;
    if (this.norMode) {
      if (this.mainTop) {
        this.filterFixed = res.scrollTop > this.mainTop - this.navHeight;
        if (!this.filterFixed && this.opening) {
          this.$refs.filter.close();
        }
      }
    }
  },
  onReachBottom() {
    this.$set(this.pageParam, "page", this.pageParam.page + 1);
    this.handleJobList(true);
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: this.sharePath,
  //     imageUrl: this.imageUrl,
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: this.sharePath,
  //     query: this.shareQuery,
  //     imageUrl: this.imageUrl,
  //   };
  // },
  methods: {
    getPositionInfo(id) {
      const params = {
        dataTypeList: [50, 60, 70],
        positionId: id,
        groupBy: "dataType",
      };
      getLayerDataRelList(params).then((res) => {
        console.log("新的职位", res);
        if (res.code == 200 && res.data.length > 0) {
          let dataTitle, dataId;
          let dataArray = res.data;

          let dataType70Obj = dataArray.find((obj) => obj.dataType === 70);
          if (dataType70Obj) {
            dataTitle = dataType70Obj.dataTitle;
            let dataType60Obj = dataArray.find((obj) => obj.dataType === 60);
            if (dataType60Obj) {
              dataId = dataType60Obj.dataId;
            } else {
              dataId = null; // 如果不存在dataType为60的对象，设定dataId为空值
            }
          } else {
            let dataType50Obj = dataArray.find((obj) => obj.dataType === 50);
            if (dataType50Obj) {
              dataTitle = dataType50Obj.dataTitle;
            } else {
              dataTitle = null; // 如果不存在dataType为50的对象，设定dataTitle为空值
            }
            dataId = "1000";
          }
          this.recommendedPositions.dataId = dataId;
          this.recommendedPositions.dataTitle = dataTitle;
          // res.data.forEach((item) => {
          //   if (item.dataType == 60) {
          //     this.ruleForm.trade = item.dataId;
          //     this.ruleForm.tradeName = item.dataTitle;
          //     this.getPositionCategoryList(this.ruleForm.trade);
          //   } else if (item.dataType == 70) {
          //     this.ruleForm.category = item.dataId;
          //     this.ruleForm.categoryName = item.dataTitle;
          //   }
          // });
        }
      });
    },
    handleModeChange() {
      this.norMode = false;
      this.isModeChange = true;
      this.handleJobList();
    },
    handleFilterOpen() {
      this.opening = false;
      if (this.scrollTop < this.mainTop - this.navHeight) {
        uni.pageScrollTo({
          duration: 100,
          scrollTop: this.mainTop,
        });
        setTimeout(() => {
          this.opening = true;
        }, 500);
      }
    },
    handleFilterClose() {
      this.opening = false;
    },
    // 筛选页
    handleFilter() {
      let item = encodeURIComponent(JSON.stringify(this.filter));
      uni.navigateTo({
        url: "/pagesSub/index/filter/index?item=" + item,
      });
    },
    handleAimList() {
      if (this.norMode) {
        let param = {
          person_id: uni.getStorageSync("person-id").slice(2) || undefined,
        };
        getMyIntendedTradeList(param)
          .then((res) => {
            if (res && +res.code === 200) {
              this.aimList = res.data.myTended || [];
              this.aimList.unshift({
                zwname: "",
                label: "推荐",
              });
            }
          })
          .finally(() => {
            this.handleRegionId();
          });
      } else {
        this.handleRegionId();
      }
    },
    handleRegionId() {
      if (this.nowRegionName) return;
      let that = this;
      uni.getLocation({
        success(locationRes) {
          let param = {
            x: locationRes.latitude,
            y: locationRes.longitude,
            point: "1",
          };
          getRegionByXY(param)
            .then((res) => {
              console.log("getRegionByXY:", res);
              if (
                res &&
                res.result &&
                res.result.ad_info &&
                res.result.ad_info.adcode
              ) {
                // that.nowRegionId = res.result.ad_info.adcode.slice(0, 4) + "00";
                let regionId = res.result.ad_info.adcode.slice(0, 4) + "00";
                that.nowRegionName = res.result.ad_info.city;
                uni.setStorageSync("current-region", regionId);
              } else {
                that.nowRegionId = "";
              }
              that.handleJobList();
            })
            .catch((err) => {
              console.log("err:", err);
            });
        },
        fail(res) {
          console.log("fail", res);
          getIpLocation()
            .then((res) => {
              console.log("getIpLocation:", res);
              if (res.code == 200) {
                let regionId = res.data.adcode.slice(0, 4) + "00";
                that.nowRegionName = res.data.city;
                uni.setStorageSync("current-region", regionId);
                that.handleJobList();
              } else {
                that.nowRegionId = "";
                that.handleJobList();
              }
            })
            .catch((err) => {
              that.nowRegionId = "";
              that.handleJobList();
            });
        },
      });
    },
    handleChangeRegion(type) {
      if (type == "all") {
        this.nowRegionId = "";
      } else {
        this.nowRegionId = uni.getStorageSync("current-region");
      }
      this.pageParam.page = 0;
      this.handleJobList();
    },
    handleJobList(isMore) {
      // console.log("this.$haveRmdPost", this.$haveRmdPost);
      if (this.norMode) {
        return this.handleSearch(isMore);
      }
      if (this.moreLoading == "loading") return;
      this.moreLoading = "loading";
      let param = {
        tradeid: this.$tradeId,
        queryItemArr: JSON.stringify({
          regionid: this.nowRegionId || "",
          salary: this.filter.salary || "",
          gznum: this.filter.exp || "",
          itime_num: this.filter.time || "",
          eduId: this.filter.edu || "",
          jobtypes: this.filter.type || "",
        }),
        conditionArr: JSON.stringify({
          page: this.pageParam.page,
          page_size: this.pageParam.pageSize,
        }),
      };
      this.postProp = {
        title: "jtzw",
        salary: "xzdy_new",
        cname: "cname_all",
        time: "updatetime",
        region: "regionname",
        fldy: "fldy",
        gznum: "gznum",
        edus: "edus",
        jobtypes: "jobtypes",
      };
      searchZp(param).then((res) => {
        if (isMore) {
          this.postList.push(...(res.data || []));
        } else {
          this.postList = res.data || [];
        }
        if (res.data) {
          this.moreLoading = "loadmore";
          if (this.pageParam.page >= res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
        }
      });
      // }
    },
    // 搜索职位列表
    handleSearch(isMore) {
      if (
        isMore &&
        (this.moreLoading == "loading" || this.moreLoading == "nomore")
      )
        return;
      this.moreLoading = "loading";
      let jtzw =
        this.aimList &&
        this.aimList[this.activeAim] &&
        this.aimList[this.activeAim].zwname;
      let tradeId = this.filter.trade || this.$tradeId;
      if (this.activeAim == 0) {
        jtzw = this.recommendedPositions.dataTitle;
        tradeId = this.recommendedPositions.dataId;
      }
      let queryItemArr = {
        salary: this.filter.salary || "",
        regionid: this.nowRegionId || "",
        itime_num: this.filter.time || "",
        eduId: this.filter.edu || "",
        jobtypes: this.filter.type || "",
        gznum: this.filter.exp || "",
      };
      if (this.recommendedPositions.dataId == 1000) {
        queryItemArr.jtzw = this.recommendedPositions.dataTitle;
      }
      let param = {
        tradeid: tradeId,
        queryItemArr: JSON.stringify(queryItemArr),
        conditionArr: JSON.stringify({
          page_size: this.pageParam.pageSize,
          yxzw_sort: "max",
          isFromType: "fromJobHome",
          check_isky: "1",
          typeName: "rec",
          person_tradeid: tradeId,
          page: this.pageParam.page,
          yxzw: jtzw || "",
          // personId: this.personId || '',
          is_mp: 1,
        }),
      };
      searchZp(param).then((res) => {
        if (isMore) {
          this.postList.push(...(res.data || []));
        } else {
          this.postList = res.data || [];
        }
        if (res.data) {
          this.moreLoading = "loadmore";
          if (this.pageParam.page >= res.pageparam.pages) {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
        }
        this.isSearched = true;
      });
    },
    handleToSearch() {
      uni.navigateTo({ url: "/pagesSub/index/search/index" });
    },
    handleAimClick(index) {
      this.activeAim = index;
      this.pageParam.page = 0;
      this.handleJobList();
    },
    handleToAim() {
      if (!this.personId) {
        return uni.showToast({
          title: "请先登录",
          icon: "none",
          complete() {
            setTimeout(() => {
              // #ifdef H5
              uni.navigateTo({
                url: "/pagesSub/public/login/index",
              });
              // #endif
              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: "/pagesSub/public/login/index",
              });
              // #endif
            }, 1500);
          },
        });
      }
      uni.navigateTo({ url: "/pagesSub/resume/aim/index" });
    },
    handleConfirm([data, name], index) {
      if (Array.isArray(name) && Array.isArray(data)) {
        this.$set(this.filter, name[0], data[0]);
        this.$set(this.filterList[index], "activeName", data[1]);
        if (index) {
          this.$set(this.filterList[index], "activeParent", data[2]);
        }
      } else {
        this.$set(this.filter, name, data);
      }
      this.$refs.filter.close();
      this.handleSearch();
    },
    handleComFilter(data) {
      this.filter = { ...this.filter, ...data };
      this.$refs.filter.close();
      this.handleSearch();
    },
    handleReset() {
      this.filter = {
        region: "",
        trade: null,
        salary: null,
      };
      this.filterList = [
        {
          name: "工作地区",
          component: "RegionFilter",
          prop: "region",
          propList: ["region"],
        },
        {
          name: "筛选",
          component: "MoreFilter",
        },
      ];
      this.pageParam.page = 0;
      this.nowRegionId = "";
      this.handleSearch();
    },
  },
};
</script>

<style lang="scss">
@include img-base-self(".index .index-top", "home/top_bg.png");
::v-deep .logo {
  position: absolute;
  left: 80rpx;
  top: 50%;
  width: $logo-width;
  height: $logo-height;
  transform: translateY(-50%);
}
::v-deep .placeholder {
  font-size: 28rpx;
  color: #999;
}
.index {
  position: relative;
  .index-top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 578rpx;
    background-size: 100% 100%;
    /* #ifdef H5 */
    background-size: 100% auto;
    background-position: center bottom;
    /* #endif */
    border-radius: 0 0 60rpx 60rpx;
    box-sizing: border-box;
    &-no-kingkong {
      height: auto;
      padding-bottom: 20rpx;
      border-radius: 0;
    }
  }
  .index-search {
    margin: 0 32rpx;
    padding-top: 12rpx;
    .search-wrap {
      display: flex;
      align-items: center;
      padding: 0 44rpx;
      height: 80rpx;
      border-radius: 44rpx;
      background: $search-bg;
      image {
        flex-shrink: 0;
        margin-right: 16rpx;
        width: 44rpx;
        height: 44rpx;
      }
      input {
        flex: 1;
        height: 100%;
        font-size: $uni-font-size-base;
        color: #ffffff;
      }
    }
  }
  .index-banner {
    margin-top: 32rpx;
    padding: 0 32rpx;
    swiper {
      height: calc(500 * (100vw - 64rpx) / 1920);
      border-radius: 20rpx;
      overflow: hidden;
      swiper-item {
        border-radius: 20rpx;
        background: $uni-bg-color;
        overflow: hidden;
        image {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .index-main {
    padding: 0rpx 0 28rpx;
    background: $uni-bg-color-grey;
    .hot-post {
      color: $uni-text-color-222;
      .hp-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32rpx;
        padding: 32rpx 32rpx 0;
        font-size: $uni-font-size-sec;
        font-weight: bolder;
        .title-back {
          font-size: $uni-font-size-base;
          font-weight: normal;
          color: $u-type-primary;
        }
      }
      ::v-deep .job-list {
        padding: 0 32rpx;
      }
      .hp-filter-wrap {
        height: 208rpx;
        .hp-filter {
          // padding-top: 32rpx;
          &.fixed {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
            width: 100%;
            background: $uni-bg-color-grey;
          }
          .filter-post {
            display: flex;
            align-items: center;
            padding: 16rpx 32rpx 14rpx 32rpx;
            margin-bottom: $uni-spacing-col-lg;
            background-color: #fff;
            .post-list {
              flex-grow: 1;
              display: flex;
              align-items: center;
              overflow: auto;
              .post-item {
                margin-left: 16rpx;
                padding: 16rpx;
                font-size: $uni-font-size-base;
                // background: $uni-text-color-grey;
                // border-radius: 28rpx;
                white-space: nowrap;
                &:first-of-type {
                  margin-left: 0;
                }
                &.active {
                  position: relative;
                  font-size: 34rpx;
                  font-weight: bold;
                  // color: #ffffff;
                  // background: $search-bg;
                  // border-radius: 33rpx;
                  &::after {
                    display: inline-block;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    content: "";
                    width: 56rpx;
                    height: 14rpx;
                    background-image: url($img-base + "select.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
            }
            .add {
              flex-shrink: 0;
              // display: flex;
              // align-items: center;
              // justify-content: center;
              width: 110rpx;
              // height: 200rpx;
              // margin-top: -8rpx;
              text-align: center;
              font-size: $uni-font-size-min;
              color: $uni-text-color-666;
              // background: $uni-bg-color-grey;
              &-icon {
                width: 28rpx;
                height: 28rpx;
                margin-bottom: 6rpx;
                background-image: url($img-base + "home/icon-add.png");
                background-size: 100% 100%;
              }
            }
          }
          .filter-more {
            display: flex;
            justify-content: space-between;
            padding: 0 32rpx 24rpx 32rpx;

            &-left {
              .btn-region {
                display: inline-block;
                padding: 4rpx 16rpx;
                margin-right: 16rpx;
                color: #666;
                &.active {
                  color: $u-type-primary;
                  border-radius: $uni-border-radius-big;
                  background-color: $uni-bg-color;
                }
              }
            }

            &-right {
              .region-name {
                display: inline-block;
                font-size: 28rpx;
                margin-right: 20rpx;
                padding: 6rpx 16rpx;
                color: $u-type-primary;
                border-radius: $uni-border-radius-sm;
                background-color: $bg-color-button;
              }
            }
            &-filter {
              display: inline-block;
              color: #666;
              background-color: $uni-bg-color-border-f1;
              padding: 6rpx 16rpx;
              .filter-text {
                margin-right: 10rpx;
              }
            }

            ::v-deep .u-dropdown {
              padding: 0 32rpx;
              .u-dropdown__menu__item {
                flex: 0;
                padding-right: 32rpx;
                .u-dropdown__menu__item__text {
                  display: inline-block;
                  max-width: 100rpx;
                  color: $uni-text-color-555 !important;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
                .u-dropdown__menu__item__arrow {
                  margin-top: 2rpx !important;
                  margin-left: 8rpx !important;
                  .u-icon__icon {
                    color: $uni-text-color-222 !important;
                  }
                }
              }
              .u-dropdown__content {
                height: 100vh !important;
              }
            }
            ::v-deep .region-filter,
            ::v-deep .street-wrap {
              max-height: 54vh;
            }
          }
        }
      }
    }
    .no-data {
      margin: 0 32rpx;
      padding: 40rpx 44rpx;
      background: $uni-bg-color;
      border-radius: 24rpx;
      ::v-deep .u-empty {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .u-icon__label {
          margin-bottom: 16rpx !important;
        }
        .u-slot-wrap {
          flex-grow: 1;
          margin-top: 0;
          margin-left: 44rpx;
        }
        .no-data-opt {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .u-btn,
          u-button {
            width: 100%;
          }
          .reset {
            margin-bottom: 24rpx;
          }
        }
      }
    }
  }
}
</style>
